<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/jquery/jquery-3.3.1.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/common/layuiload.js}" type="text/javascript"></script>
    <title>新增</title>
    <style>
    /*css*/
        .layui-upload-img{
            margin: 10px 10px 10px 10px;
            height: 100px;
            width: 100px;
        }
    </style>

</head>
<body style="margin-left:20px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新增</legend>
</fieldset>
<form id="comitform" class="layui-form"  method="post" style="width: 70%;">
    <input type="hidden" id="uid" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" value="" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block">
            <input type="number" name="num" value="" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价</label>
        <div class="layui-input-block">
            <input type="number" name="price" value="" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">销售价</label>
        <div class="layui-input-block">
            <input type="number" name="saleprice" value="" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上/下架</label>
        <div class="layui-input-block">
            <input type="radio" name="flag" value="1" title="上架" checked="checked">
            <input type="radio" name="flag" value="0" title="下架">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input type="text" name="type" value="" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="desc" value="" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">日期</label>-->
        <!--<div class="layui-input-inline">-->
            <!--<input type="text" name="createtime" id="createtime" value="" lay-verify="date" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-upload" style="margin-left: 50px;margin-top: 20px;margin-bottom: 50px;">
        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button><br/>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote><br/>
        <button type="button" class="layui-btn" id="test9" style="display: none">图片上传</button>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1" type="button" onclick="comitform()" >立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <input type="hidden" id="goodsid">
</form>
<!-- 获取basepath url ajax使用 -->
<span th:include="fragments/basepath::html"></span>
<!-- 获取basepath url ajax使用 -->
</body>
<script th:inline="javascript">

    //js
    var baseUrl = getBaseUrl();
    var sessionuser=getuser();
    //日期必备
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#createtime' //指定元素
            ,type:'datetime'
            ,format:'yyyy-MM-dd HH:mm:ss'
        });
    });
    //多图片上传
    layui.use('upload', function(){
        var $ = layui.jquery,
            upload = layui.upload;
        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            ,url: baseUrl+'/upload/uploadimage'
            ,auto: false
            ,multiple:false //多图上传 关闭 false
            ,bindAction: '#test9'
            ,done: function(res){
               if(res==0){
                    layer.msg('失败');
                }else if(res==2){
                    layer.msg('用户信息丢失');
                }else{
                    layer.msg('成功上传');
                }
                window.location.href=baseUrl+"/goods/index";
            },choose: function(obj){
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
//                    console.log(index); //得到文件索引
//                    console.log(file); //得到文件对象
//                    console.log(result); //得到文件base64编码，比如图片
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><br/><span>'+ file.name +'</span>');
                    //这里还可以做一些 append 文件列表 DOM 的操作
                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                });
            },before:function(){
                this.data={"userid": sessionuser,"goodsid":$("#goodsid").val()}//携带额外的数据
            }
        });
    });
    function comitform(){
        if($("#name").val()=="" || sessionuser==""){
            alert("信息缺失"+sessionuser);
            return false;
        }
        $.ajax({
            url:baseUrl+"/goods/insertDo",
            data:$("#comitform").serialize(),
            type:"post",
            dataType:"json",
            success:function(data){
                console.log(data);
                if(data.status==0){
                    layer.msg("操作失败!");
                }else{
                    layer.msg("添加商品成功");
                    $("#goodsid").val(data.result);
                    $("#test9").click(); //开始上传图片
                }
            }
        });
    }
</script>
</html>